import React, { Component } from "react";

export default class Sku extends Component {
  constructor() {
    super();
    this.state = {
      img: "",
      num: 0, //库存
      colorid: 0, //选中的颜色
      sizeid: 0, //选中尺寸
      colorList: [], //颜色的集合
      sizeList: [], //尺寸的集合
      list: [
        {
          id: 1,
          colorid: 1,
          colorname: "红色",
          sizeid: 1,
          sizename: "xl",
          num: 2,
          img: "1.jpg",
        },
        {
          id: 2,
          colorid: 1,
          colorname: "红色",
          sizeid: 2,
          sizename: "xxl",
          num: 3,
          img: "1.jpg",
        },
        {
          id: 3,
          colorid: 1,
          colorname: "红色",
          sizeid: 3,
          sizename: "xxxl",
          num: 4,
          img: "1.jpg",
        },
        {
          id: 4,
          colorid: 2,
          colorname: "蓝色",
          sizeid: 1,
          sizename: "xl",
          num: 6,
          img: "2.jpg",
        },
        {
          id: 5,
          colorid: 2,
          colorname: "蓝色",
          sizeid: 2,
          sizename: "xxl",
          num: 8,
          img: "2.jpg",
        },
        {
          id: 6,
          colorid: 2,
          colorname: "蓝色",
          sizeid: 3,
          sizename: "xxxl",
          num: 10,
          img: "2.jpg",
        },
      ],
    };
  }
  sizeChange = (item) => {
    //尺寸的改变事件
    // console.log(item.sizeid);
    // console.log(this.state.colorid);

    // console.log(   this.state.list.filter(
    //     (info) =>
    //       info.colorid == this.state.colorid && info.sizeid == item.sizeid
    //   ))
    this.setState({
      num:this.state.list.filter(
        (info) =>
          info.colorid == this.state.colorid && info.sizeid == item.sizeid
      )[0]["num"],
      sizeid: item.sizeid,
    });
  };
  colorChange = (item) => {
    //item对象  有colorid
    //   console.log(item.colorid);
    //   console.log(this.state.sizeid);
    //  console.log( this.state.list.filter((info) =>info.colorid == item.colorid && info.sizeid == this.state.sizeid
    //   ));
    this.setState({
      img: item.img,
      num: this.state.list.filter(
        (info) =>
          info.colorid == item.colorid && info.sizeid == this.state.sizeid
      )[0]["num"],
      colorid: item.colorid,
    });
  };

  componentDidMount() {
    //组件结构加载完成

    let allColorList = this.state.list.map((item) => item.colorid); //["1","1","1","2","2","2"]
    let colorList = Array.from(new Set(allColorList)); //数组去重  颜色的集合  ["1","2"]
    // console.log(colorList);
    colorList = colorList.map((colorid) => {
      let info = this.state.list.filter((item) => item.colorid == colorid)[0];
      //随便找到一条颜色信息
      return {
        colorid,
        colorname: info.colorname,
        img: info.img,
      };
    });

    let allSizeList = this.state.list.map((item) => item.sizeid); //["1","2","3","1","2","3"]
    let sizeList = Array.from(new Set(allSizeList)); //所有的尺寸的集合

    sizeList = sizeList.map((sizeid) => {
      return {
        sizeid,
        sizename: this.state.list.filter((item) => item.sizeid == sizeid)[0][
          "sizename"
        ],
      };
    });
    console.log(sizeList);
    // console.log(colorList);
    this.setState({
      //更新数据
      colorList,
      sizeList,
      img: colorList[0].img,
      num: this.state.list.filter(
        (item) =>
          item.sizeid == sizeList[0]["sizeid"] &&
          item.colorid == colorList[0]["colorid"]
      )[0]["num"],
      sizeid: sizeList[0]["sizeid"],
      colorid: colorList[0]["colorid"],
    });
  }

  render() {
    return (
      <div>
        <div>{this.state.img}</div>
        <div>
          商品颜色
          {this.state.colorList.map((item) => {
            return (
              <button
                key={item.colorid}
                onClick={() => {
                  this.colorChange(item); //颜色点击事件
                }}
              >
                {item.colorname}
              </button>
            );
          })}
        </div>
        <div>
          商品尺寸
          {this.state.sizeList.map((item) => {
            return (
              <button
                onClick={() => {
                  this.sizeChange(item); //尺寸的点击事件
                }}
                key={item.sizeid}
              >
                {item.sizename}
              </button>
            );
          })}
          <div>存库:{this.state.num}</div>
        </div>
      </div>
    );
  }
}
